import React from 'react';
import { Modal, Select, DatePicker, Input, message } from 'antd';
import cass from 'classnames';
import moment from 'moment';
import s from  './index.module.less';
import { getFileName } from './index';

const Option = Select.Option;

class RenameModal extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            dateValue: '',
            nameValue: '',
            signValue: '',
            stampValue: '',
            originValue: '',
            pageValue: '',
            partValue: '',
            remarkValue: ''
        }
    }

    componentWillReceiveProps(nextProps) {
        const { data } = nextProps;
        if(data){
            const target = data.sourcefilename || '{}';
            const obj = JSON.parse(target);
            this.setState({
                dateValue: obj.date,
                nameValue: obj.name,
                signValue: obj.sign,
                stampValue: obj.mark,
                originValue: obj.original,
                pageValue: obj.page,
                partValue: obj.piece,
                remarkValue: obj.remark,
                response : { extension: data.extension },
            });
        }
    }

    onCancel = () => {
        const { onCancel } = this.props;
        onCancel();
    }

    handleOk = () => {
        const { dateValue, nameValue } = this.state;
        if(!dateValue){
            message.warn('文件落款/形成日期');
            return;
        }
        if(!nameValue){
            message.warn('文件名称不能为空');
            return;
        }
        const { filename, sourcefilename } = getFileName(this.state);
        this.setState({ confirmLoading: true });
        this.props.onChange({
            newfilename: filename,
            sourcefilename,
            filerecid: this.props.data.fileid,
        }, () => {
            message.success('修改文件名称成功');
            this.setState({ confirmLoading: false }, this.onCancel);
        })
    }

    onValueChange = (key, onlyNum) => (v, time) => {
        if(onlyNum === 'num') {
            const { value } = v.target;
            const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
            if (!((!Number.isNaN(value) && reg.test(value)) || value === '' || value === '-')) {
             return;
            }
        }

        let value = v;
        if(key === 'dateValue') value = time;
        else if(key === 'originValue') value = v;
        else value = v.target.value;
        this.setState({ [key]: value });
    }
  
    render() {
        const { show } = this.props;
        const state = this.state;
        const { confirmLoading } = state;
        return (
            <Modal
                title="重命名文件"
                visible={show}
                width={500}
                okText="确定"
                cancelText="取消"
                onOk={this.handleOk}
                onCancel={this.onCancel}
                confirmLoading={confirmLoading}
                wrapClassName={s.wrapModal}
            >
                <div className={s.renameContent}>
                    <div className={s.wrap}>
                        <div className={cass(s.require, s.label)}>文件落款/形成日期:</div>
                        <DatePicker
                            value={state.dateValue ? moment(state.dateValue) : null}
                            onChange={this.onValueChange('dateValue')}
                            className={s.date}
                            placeholder="文件落款/形成日期"
                        />
                    </div>
                    <div className={s.wrap}>
                        <div className={cass(s.require, s.label)}>文件名:</div>
                        <Input
                            value={state.nameValue}
                            onChange={this.onValueChange('nameValue')}
                            placeholder="文件名"
                        />
                    </div>
                    <div className={cass(s.wrap, s.wrap1)}>
                        <div className={s.item}>
                            <div className={cass(s.label)}>签字人:</div>
                            <Input
                                value={state.signValue}
                                onChange={this.onValueChange('signValue')}
                                placeholder="签字人"
                            />
                        </div>
                        <div className={s.item}>
                            <div className={cass(s.label)}>盖章人:</div>
                            <Input
                                value={state.stampValue}
                                onChange={this.onValueChange('stampValue')}
                                placeholder="盖章人"
                            />
                        </div>
                    </div>
                    <div className={s.wrap}>
                        <div className={cass(s.item, s.item1)}>
                            <div className={cass(s.require, s.label)}>原件:</div>
                            <Select value={state.originValue} onChange={this.onValueChange('originValue')}>
                                <Option value="有">有</Option>
                                <Option value="无">无</Option>
                            </Select>
                        </div>
                        <div className={cass(s.item, s.item2)}>
                            <div className={cass(s.label)}>页数:</div>
                            <Input
                                value={state.pageValue}
                                onChange={this.onValueChange('pageValue', 'num')}
                                placeholder="页数"
                            />
                        </div>
                        <div className={cass(s.item, s.item2)}>
                            <div className={cass(s.label)}>份数:</div>
                            <Input
                                value={state.partValue}
                                onChange={this.onValueChange('partValue', 'num')}
                                placeholder="份数"
                            />
                        </div>
                    </div>
                    <div className={s.wrap}>
                        <div className={cass(s.label)}>备注:</div>
                        <Input
                            value={state.remarkValue}
                            onChange={this.onValueChange('remarkValue')}
                            placeholder="请填备注"
                        />
                    </div>
                </div>
            </Modal>
        );
    }
}

export default RenameModal